<template>
  <div>
    <site-head />
    <div class="site_container">
      <div
        class="container_inner"
        :style="{ height: this.isOpen ? '870px' : '676px' }"
      >
        <div class="palyer_container">
          <div class="container_inner_left">
            <Player v-if="playerVisible" :url="playUrl" />
            <div class="mod_action">
              <div class="action_wrap">
                <span class="action_title">31.2亿次播放量</span>
              </div>
            </div>
            <!-- <div class="player_container_wide_switch" @click="openOrShrink()">
              <i
                :class="{
                  'el-icon-arrow-right': !this.isOpen,
                  'el-icon-arrow-left': this.isOpen,
                  tubiao: true,
                }"
              ></i>
            </div> -->
          </div>
          <div class="container_inner_right" v-if="!this.isOpen">
            <div class="scroll_top">
              <div class="player_header">
                <span class="player_title">{{videoDetails.videoInfo.name}}</span>
                <span @click="handelCollect()" class="icon-body">
                  <svg-icon
                    v-if="!this.isCollect"
                    class="icon-collect"
                    icon-class="collect"
                  />
                  <svg-icon
                    v-else
                    class="check-icon-collect icon-collect"
                    icon-class="check-collect"
                  />
                </span>
              </div>
            </div>
            <div class="scroll_wrap">
              <div class="mod_list">
                <div
                  class="size_list"
                  v-if="
                    videoDetails.videoInfo != null &&
                    videoDetails.videoInfo.isSingle === '1'
                  "
                >
                  <span
                    @click="checkPageSizeIndex(0)"
                    v-for="(item, index) in this.page.list"
                    :key="index"
                    :class="{ check: pageSizeIndex === 0 }"
                    >{{ item }}</span
                  >
                </div>
                <div class="item_list">
                  <template
                    v-if="
                      videoDetails.videoInfo != null &&
                      videoDetails.videoInfo.isSingle === '1'
                    "
                  >
                    <span
                      v-for="(item, index) in videoDetails.videoDramasSeries"
                      :key="item.id"
                      @click="checkVideoItemIndex(item.id)"
                      :class="{
                        item: true,
                        item_check: videoItemIndex === item.id,
                      }"
                      >{{ index > 8 ? index + 1 : "0" + (index + 1) }}</span
                    >
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SiteHead from "@/components/SiteHead";
import Player from "./player";
import { getDetailsById } from "@/api/video";
import { getSucList } from "@/api/videoResource";

export default {
  components: {
    SiteHead,
    Player,
  },
  created() {
    this.init();
  },
  watch:{
    videoItemIndex(){
      this.getResources();
    }
  },
  data() {
    return {
      page: {
        minSize: 30,
        maxTotalPage: 4,
      },
      showList: [],
      videoId: this.$route.params.videoId,
      videoDetails: {},
      pageSizeIndex: 0,
      videoItemIndex: null,
      isCollect: true,
      isOpen: false,
      playerVisible: true,
      videoResources: [],
      playUrl: null,
    };
  },
  methods: {
    getResources() {
      if (this.videoItemIndex != null) {
        getSucList(this.videoItemIndex).then((v) => {
          this.videoResources = v.data;
          this.playUrl = this.videoResources[0].url;
          console.log("#######",this.videoResources[0].url,this.playUrl)
        });
      }
    },
    init() {
      getDetailsById(this.videoId).then((v) => {
        this.videoDetails = v.data;
        if (v.data.videoDramasSeries.length > 0) {
          this.initPaging(v.data);
          this.initResource(v.data.videoDramasSeries[0].id)
        }
      });
    },
    initResource(id){
      this.videoItemIndex = id
    },
    initPaging(data) {
      var minsize = this.page.minSize;
      var b = true;
      var totalPage = 0;
      while (b) {
        totalPage = Math.ceil(
          data.videoDramasSeries.length / this.page.minSize
        );
        if (totalPage <= this.page.maxTotalPage) {
          b = false;
        } else {
          minsize = minsize * 2;
        }
        console.log(b, totalPage, this.page.maxTotalPage);
      }
      const list = [];
      for (var i = 0; i < totalPage; i++) {
        if (i + 1 == totalPage) {
          if ((i + 1) * minsize > data.videoDramasSeries.length) {
            list.push(i * minsize + 1 + "-" + data.videoDramasSeries.length);
          }
        } else {
          list.push(i * minsize + 1 + "-" + (i + 1) * minsize);
        }
      }
      this.page = {
        totalPage: totalPage,
        minsize: minsize,
        list: list,
        pageSize: minsize,
      };
    },
    checkShowVideoList(currentIndex) {
      const list = [];
      const start = (currentIndex - 1) * this.page.pageSize;
      const end = currentIndex * this.page.pageSize;
      this.hotVideoList.forEach((item, index) => {
        if (start <= index && index < end) {
          list.push(item);
        }
      });
      this.showVideoList = list;
    },

    handelCollect() {
      this.isCollect = !this.isCollect;
    },
    checkPageSizeIndex(index) {
      this.pageSizeIndex = index;
    },
    checkVideoItemIndex(index) {
      this.videoItemIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
@media (max-width: 1789px) {
  .container_inner {
    width: 1500px;
  }
  .container_inner_left {
    width: 1180px;
  }
}
@media (max-width: 1549px) {
  .container_inner {
    width: 1200px;
  }
  .container_inner_left {
    width: 880px;
  }
  .container_inner_right {
    height: 545px;
  }
}
@media (max-width: 1280px) {
  .container_inner {
    width: 990px;
  }
  .container_inner_left {
    width: 670px;
  }
  .container_inner_right {
    height: 427px;
  }
}

.site_head_fixed {
  position: absolute i !important;
}
.site_container {
  background: #0f0f1e;
  width: 100%;
  min-width: 1000px;
  // height: 675px;
  padding-top: 70px;
  transition: width 0.5s;
  -moz-transition: width 0.5s; /* Firefox 4 */
  -webkit-transition: width 0.5s; /* Safari and Chrome */
  -o-transition: width 0.5s; /* Opera */
  .container_inner {
    // width: 1270px;
    margin: 0 auto;
    .palyer_container {
      position: relative;
      width: 100%;
      margin: 0 auto;
    }
    .container_inner_right {
      z-index: 1;
      position: absolute;
      top: 0;
      right: 0;
      width: 320px;
      float: right;
      background: #1c1d30;
      color: #bbb;
      .scroll_wrap {
        height: 522px;
        position: absolute;
        top: 63px;
        width: 94%;
        left: 20px;

        .check {
          color: #ff5c38;
        }
        .item_list {
          padding-top: 17px;

          .item_check {
            color: #ff5c38;
            background: black;
          }
          .item {
            padding-left: 13px;
            padding-top: 10px;
            cursor: pointer;
            display: block;
            height: 26px;
            width: 35px;
            border-radius: 20px;
            float: left;
          }
        }
        .size_list {
          height: 33px;
          width: 90%;
          border-radius: 20px;
          background: black;

          span {
            cursor: pointer;
            padding-top: 5px;
            display: block;
            line-height: 20px;
            font-size: 14px;
            padding-left: 10px;
            float: left;
          }
          span:hover {
            color: #ff5c38;
          }
        }
      }
      .scroll_top {
        width: 100%;
        position: absolute;
        top: 0px;

        .player_header {
          padding: 16px 0 5px 20px;

          .icon-body:hover {
            background: red;
          }
          .icon-body {
            display: block;
            margin-right: 23px;
            width: 47px;
            height: 34px;
            border-radius: 22px;
            float: right;

            .icon-collect {
              font-size: 20px;
              padding: 7px 14px;
            }
            .check-icon-collect {
              color: red;
            }
            .icon-collect:hover {
              color: white;
            }
          }
        }
        .player_title {
          color: #fff;
          font-weight: 500;
          font-size: 22px;
        }
      }
    }
    .container_inner_left {
      transition: width 0.5s;
      -moz-transition: width 0.5s; /* Firefox 4 */
      -webkit-transition: width 0.5s; /* Safari and Chrome */
      -o-transition: width 0.5s; /* Opera */
      // float: left;
      position: absolute;
      .player_container_wide_switch {
        position: absolute;
        top: 50%;
        right: -9px;
        width: 9px;
        height: 59px;
        margin-top: -4px;
        cursor: pointer;
        background-color: #444444;
        z-index: 2;
        .tubiao {
          color: #dddddd;
          position: absolute;
          top: 20px;
          left: -4px;
        }
      }
      .player_container_wide_switch:hover {
        background-color: #666666;

        .tubiao {
          color: red;
        }
      }

      .mod_action {
        width: 100%;
        height: 50px;
        background-color: #1c1d30;
        color: #999;
        .action_wrap {
          position: relative;
          float: left;
        }
        .action_title {
          padding: 14px 15px 0 17px;
          height: 50px;
          display: block;
        }
      }
    }
  }
}
</style>
